<template>
  <div class="container">
    <div class="search">
      <el-date-picker
        v-model="dateValue"
        type="daterange"
        range-separator="To"
        start-placeholder="Start date"
        end-placeholder="End date"
        :size="size"
        format="YYYY-MM-DD HH:mm:ss"
        value-format="YYYY-MM-DD HH:mm:ss"
      />
    </div>
    <Waterfall
      ref="waterfall"
      :list="waterList"
      :gutter="20"
      :width="246"
      backgroundColor="rgb(240, 242, 245)"
    >
      <template #item="{ item, url, index }">
        <div class="card">
          <p class="text">
            <img :src="item.image" />
          </p>
          <el-divider class="divider" />
          <div class="bottom">
            <div class="price">
              <el-space wrap>
                <el-tag type="primary">价格:{{ item.rmb }}</el-tag>
                <el-tag type="success">状态:{{ item.state }}</el-tag>
                <el-tag type="warning">可住人数:{{ item.number }}</el-tag>
              </el-space>
            </div>
            <div>
              <el-button type="danger" size="small" @click="() => goDetail(item)">详情</el-button>
            </div>
          </div>
        </div>
      </template>
    </Waterfall>
    <el-empty :image-size="200" v-if="waterList?.length === 0" />
  </div>
</template>

<script setup>
  import { onMounted, onUpdated, ref, reactive, watch } from 'vue'
  import { LazyImg, Waterfall } from 'vue-waterfall-plugin-next'
  import 'vue-waterfall-plugin-next/dist/style.css'
  import { getListNoOrder } from '/@/api/house/house.ts'
  import { createLocalStorage } from '/@/utils/cache'
  import { LOCALE_KEY } from '/@/enums/cacheEnum'
  import { useRouter } from 'vue-router'
  import dayjs from 'dayjs'
  const { push } = useRouter()
  const time1 = dayjs().format('YYYY-MM-DD HH:mm:ss')
  const time2 = dayjs().add(3, 'day').format('YYYY-MM-DD HH:mm:ss')
  const dateValue = ref([time1, time2])
  let waterList = ref()
  const waterfall = ref(null)
  const getData = () => {
    const data = {
      page: 0,
      start_time:dateValue.value[0],
      end_time:dateValue.value[1]
    }
    getListNoOrder(data).then((res) => {
      const data1 = res.msg
      waterList.value = data1
    })
  }

  onMounted(() => {
    getData()
  })

  watch(dateValue, () => {
    getData()
  })
  const goDetail = (item) => {
    push(
      `/piazza/detail?houseId=${item.id}&start_time=${dateValue.value[0]}&end_time=${dateValue.value[1]}`,
    )
  }
</script>

<style lang="scss" scoped>
  .search {
    margin: 10px;
  }
  .card {
    font-family: Graphik, sans-serif;
    background: rgb(17, 24, 39);
    border-radius: 6px;
    padding: 10px;
    color: rgb(224, 225, 227);
  }

  .text {
    cursor: pointer;

    &:hover {
      color: rgb(240, 213, 69);
    }
  }

  .waterfall-list {
  }

  .divider {
  }

  .bottom {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .price {
  }
</style>